<template>
  <view>
    <view v-if="data.text">
      <view
        class="textCard"
        :class="{
          textCardOther: data.from === KKConversationFrom.other,
        }"
      >
        <scroll-view
          v-if="isKatexStr(data.text || '')"
          style="width: calc(100%); padding-bottom: 12rpx"
          id="scrollview"
          scroll-x="true"
        >
          <kkKatex
            class="textCard-text textWrap"
            :class="{
              'textCard-textOther': data.from === KKConversationFrom.other,
            }"
            from="chat"
            :data="data.text"
          ></kkKatex>
        </scroll-view>
        <KKtooltip v-else ref="kktooltipRef">
          <template #content>
            <ChatTips @chatTipsClick="chatTipsClick" />
          </template>
          <!-- AI回复 -->
          <view
            v-if="data.answerWay === 3"
            class="textCard-text markdownFormate"
            :class="{
              'textCard-textOther': data.from === KKConversationFrom.other,
              'textCard-isSelectMode': isSelectMode,
            }"
            @touchstart="touchstart"
            @touchend="touchend"
          >
            <ua-markdown :source="hanldeInputText" />
          </view>
          <up-parse
            v-else
            class="textCard-text textWrap"
            :class="{
              'textCard-textOther': data.from === KKConversationFrom.other,
            }"
            :content="hanldeInputText"
          ></up-parse>
        </KKtooltip>
      </view>
      <ConversationStatus
        class="conversationStatus"
        v-if="
          data.from === KKConversationFrom.me &&
          (data.status === KKConversationStatus.fail ||
            data.status === KKConversationStatus.retry)
        "
        :data="data"
        @sendFail="sendFail"
        @reSendMsg="reSendMsg"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { isKatexStr } from "@/pagesA/utils/util";
import { KKConversationFrom, KKConversationStatus } from "./conversitonEnum";
import KKtooltip from "@/pagesA/components/kk-tooltip.vue";
import ChatTips from "@/pagesA/answer/chat/chatTips.vue";
import ConversationStatus from "@/pagesA/answer/components/conversationStatus.vue";
import kkKatex from "@/pagesA/components/kkKatex/index.vue";
import UaMarkdown from "@/pagesA/components/ua-markdown/ua-markdown.vue";

import { computed, watch } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  tapBgNumber: {
    type: Number,
    default: 0,
  },
  isSelectMode: {
    type: Boolean,
    default: false,
  },
});
const kktooltipRef = ref();
// setTimeout(() => {
//   kktooltipRef.value?.close();
// }, 3000);

const hanldeInputText = computed(() => {
  const originalText = props.data?.text || "";
  let str = originalText;
  str = str.replace(/\r\n/g, "<br>");
  str = str.replace(/\n/g, "<br>");
  return str || "";
});

const sendFail = () => {
  emit("sendFail", props.data);
};

// 重新发送消息
const reSendMsg = () => {
  emit("reSendMsg", props.data);
};

// 聊天提示事件点击
const chatTipsClick = (type: string) => {
  emit("chatTipsClick", { type, data: props.data });
  kktooltipRef.value?.close();
};

const touchstart = () => {
  console.log("textCard touchstart");
  emit("converstationTouchStart");
};

const touchend = () => {
  console.log("textCard touchend");
  emit("converstationTouchEnd");
};

watch(
  () => props.tapBgNumber,
  (newValue, oldValue) => {
    kktooltipRef.value?.close();
  }
);

const emit = defineEmits([
  "reSendMsg",
  "sendFail",
  "chatTipsClick",
  "converstationTouchStart",
  "converstationTouchEnd",
]);
</script>

<style lang="scss" scoped>
.textCard {
  border-radius: 38rpx 8rpx 38rpx 38rpx;
  background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);

  padding-bottom: 12rpx;
  padding-left: 24rpx;
  padding-top: 18rpx;
  padding-right: 24rpx;

  &-text {
    font-size: 32rpx;
    color: #ffffff;
    line-height: 48rpx;
  }
  &-textOther {
    font-size: 32rpx;
    color: #111111;
    line-height: 48rpx;
  }
  &-isSelectMode {
    width: calc(430rpx - 48rpx);
  }
  .markdownFormate {
    width: calc(478rpx - 48rpx);
  }
}
.textCardOther {
  border-radius: 8rpx 38rpx 38rpx 38rpx;
  background: #fff;
}

.conversationStatus {
}
</style>
